<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .bg {
            background-color: yellow;
        }
    </style>
</head>
<body>
<input type="text" id="txtUserName"> <br>
<input type="password" id="txtUserPassword"> <br>
<input type="button" value=" 登 录 " id="btnLogin">
<!-- <script>
   // 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
   var btnLogin = document.getElementById('btnLogin');

   btnLogin.onclick = function () {
     // 检测用户名是否是3-6位，密码是否是6-8位
     var txtUserName = document.getElementById('txtUserName');
     var txtUserPassword = document.getElementById('txtUserPassword');

     //检测用户名是否是3-6位
     if (txtUserName.value.length < 3 || txtUserName.value.length > 6) {
       txtUserName.className = 'bg';
       return;
     } else {
       txtUserName.className = '';
     }

     // 密码是否是6-8位
     if (txtUserPassword.value.length < 6 || txtUserPassword.value.length > 8) {
       txtUserPassword.className = 'bg';
       return;
     } else {
       txtUserPassword.className = '';
     }

     //
     console.log('执行登录');
   }
 </script>-->
<script>
    var txtUserName = document.getElementById("txtUserName");
    var txtUserPassword = document.getElementById("txtUserPassword");
    var btnLogin = document.getElementById("btnLogin");
    //注意是输入的值 第一写 忘记写value了，txtUserPassword.value.length
    btnLogin.onclick = function () {
        if (txtUserName.value.length < 3 || txtUserName > 6) {
            txtUserName.className = "bg"
            return;
        } else {
            txtUserName.className = '';
        }
        if (txtUserPassword.value.length < 6 || txtUserPassword.length > 8) {
            txtUserPassword.className = "bg"
            return;
        } else {
            txtUserPassword.className = '';
        }
        console.log('执行登入');
    }
</script>
</body>
</html>
